<template>
  <div class="layout-col bs flex1 bs">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">环境监控</span>
      </div>
    </div>
    <!-- 左上 -->
    <div class="flex1 ww100 flex-col-s hidden p15 overlay">
      <div class="flex-ss ww100 p15" v-for="(v, i) in publicStore._public.countList" :key="i"  @click="toPath('/new', {type: v.type})">
        <img class="w48" src="@/assets/images/d1.png" v-if="v.type == 'access_ctrl'" />
        <img class="w48" src="@/assets/images/d2.png" v-else-if="v.type == 'camera'" />
        <img class="w48" src="@/assets/images/d3.png" v-else-if="v.type == 'TH'" />
        <img class="w48" src="@/assets/images/d4.png" v-else-if="v.type == 'smoke'" />
        <img class="w48" src="@/assets/images/d5.png" v-else-if="v.type == 'water_immersion'" />
        <img class="w48" src="@/assets/images/f1.png" v-else-if="v.type == 'air_conditioner'" />
        <img class="w48" src="@/assets/images/d7.png" v-else-if="v.type == 'SF6_O2'" />
        <img class="w48" src="@/assets/images/d8.png" v-else-if="v.type == 'noise'" />
        <img class="w48" src="@/assets/images/f8.png" v-else-if="v.type == 'EICollector'" />
        <img class="w48" src="@/assets/images/f7.png" v-else-if="v.type == 'switch'" />
        <img class="w48" src="@/assets/images/d9.png" v-else-if="v.type == 'PD_high_lora'" />
        <img class="w48" src="@/assets/images/f10.png" v-else-if="v.type == 'PD_JC_CSB'" />
        <img class="w48" src="@/assets/images/f11.png" v-else-if="v.type == 'pd_3in1'" />
        <img class="w48" src="@/assets/images/f11.png" v-else-if="v.type == 'PD_JC_CSB_CYG'" />
        <img class="w48" src="@/assets/images/f12.png" v-else-if="v.type == 'DLQ_SENSOR'" />
        <img class="w48" src="@/assets/images/d10.png" v-else />
        <div class="flex-col-cs flex1 ppl8 f12">
          <div class="flex-bc ww100">
            <span>{{v.name}}</span>
            <span class="i21 flex-sc cursor">详情<i-ep-arrowRightBold class="f10 pt2 ml5" /></span>
          </div>
          <div class="flex-bc ppt2 ww100">
            <span class="i3"><span class="mlr4">·</span>在线<span class="white ml10">{{v.online}}/{{v.count}}</span></span>
            <span class="i6"><span class="mlr4">·</span>离线<span class="white ml10">{{v.count - v.online}}/{{v.count}}</span></span>
            <span class="i8"><span class="mlr4">·</span>告警<span class="white ml10">{{v.isAlarm}}</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const { proxy }: any = getCurrentInstance();
  const publicStore = proxy.publicStore();
  const state = reactive({
    ...publicStore.$state,
  });
  let exposeRef = $ref()
</script>


